<template lang="pug">
  .create-union
    .group-box.unionname
      .title 公会名称：
      .content 
        input(v-model="name")
    .group-box
      .title 房卡消耗:
      .content 10张
    .sure
      x-button(:gradients="['#FF9900', '#FF9900']" @click.native="confirm") 确定
    div() 
      alert(v-model="showError" title="房卡不足" ) 
      alert(v-model="showError2" title="公户名称不能为空" ) 
    div
      confirm( v-model="showCreate"  :title="'确认创建'+name"  @on-cancel="onCancel" @on-confirm="onConfirm")
</template>

<script>
import router from '@/router'
import memberService from '@/api/member'

export default {
  name: 'CreateUnion',
  data () {
    return {
      // msg: 'Welcome to Your Union',
      name: '',
      beans: 20,
      showCreate: false,
      showError: false
    }
  },
  created(){
    document.title = '创建公会'
  },
  methods: {
    confirm () {
      console.log('confirm')
      if (this.beans < 10) {
        this.showError = true
      } else if(this.name === ''){
        this.showError2 = true
      } else {
        this.showCreate = true
      }
    },
    onCancel () {
      this.showCreate = false
    },
    onConfirm () {
      const that = this
      memberService.AddGuild({name: this.name})
        .then(res => {
          that.$vux.alert.show({
            title: '创建公会成功',
            onHide () {
              router.replace('/index?type=2')
            }
          })
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .group-box{
    width:100%;
    padding:15px 30px;
    overflow: hidden;
    >div{
      float: left;
    }
  }
  .create-union{
    padding:20px 10px;   
    .weui-dialog__ft{
      text-align: center;
      .weui-dialog__btn_primary{
        background-color:#f90;
        color: #fff;
      } 
    }
    .weui-dialog{
      border-radius: 10px;
    }
    .unionname{
      background-color: #eee;
      border-radius: 10px;
      >div{
        color:#999;
      }
      input{
        height: 30px;
        border:none;
        outline: none;
        background-color: #eee;
        font-size: 20px;
        width: 200px;
      }
    }
  }
  
  .sure{
    padding:15px 30px;
  }
</style>
